<script setup lang="ts">
import { tableDataMore } from "./data";

withDefaults(
  defineProps<{
    height?: string;
  }>(),
  {
    height: null
  }
);

const columns: TableColumnList = [
  {
    label: "ID",
    prop: "id",
    width: "260",
    fixed: true
  },
  {
    label: "名称",
    prop: "name",
    width: "260"
  },
  {
    label: "形式",
    prop: "form",
    width: "260"
  },
  {
    label: "类型",
    prop: "type",
    width: "260"
  },
  {
    label: "操作",
    width: "120",
    fixed: "right",
    slot: "operation"
  }
];

function handleClick(row) {
  console.log(
    "%crow===>>>: ",
    "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
    row
  );
}
</script>

<template>
  <section>
    <section style="margin: 10px">
      <el-button>新增课程</el-button>
    </section>
    <pure-table
      style="margin: 10px"
      :data="
        height
          ? tableDataMore.concat(tableDataMore).concat(tableDataMore)
          : tableDataMore
      "
      :columns="columns"
      :height="height"
    >
      <template #operation="{ row }">
        <el-button link type="primary" size="small" @click="handleClick(row)">
          详情
        </el-button>
        <el-button link type="primary" size="small">编辑</el-button>
      </template>
    </pure-table>
  </section>
</template>
